<template>
    <div class="settings-container">
        <!-- 基础配置信息 -->
        <el-form label-width="120px" label-position="left" :model="formData" style="max-width: 800px">
            <!-- 配置信息 -->
            <el-form-item label="名称">
                <el-input v-model="formData.name" placeholder="配置名称"></el-input>
            </el-form-item>

            <el-form-item label="地址">
                <el-input v-model="formData.address" placeholder="配置地址"></el-input>
            </el-form-item>

            <el-form-item label="负责人">
                <el-input v-model="formData.personInCharge" placeholder="负责人姓名"></el-input>
            </el-form-item>

            <el-form-item label="手机号">
                <el-input v-model="formData.phoneNumber" placeholder="手机号"></el-input>
            </el-form-item>

            <el-form-item label="密码">
                <el-input v-model="formData.password" type="password" placeholder="修改请输入密码（留空表示不修改）"></el-input>
            </el-form-item>

            <el-form-item label="普通用户升级会员的最低消费">
                <el-input v-model.number="formData.userCommission" placeholder="元">
                    <template #append>元</template>
                </el-input>
            </el-form-item>

            <el-form-item label="校区提现费率">
                <el-input v-model.number="formData.schoolWithdrawalRate" placeholder="%">
                    <template #append>%</template>
                </el-input>
            </el-form-item>

            <el-form-item label="分销员提现费率">
                <el-input v-model.number="formData.distributorWithdrawalRate" placeholder="%">
                    <template #append>%</template>
                </el-input>
            </el-form-item>

            <el-form-item label="APP 版本号">
                <el-input v-model="formData.appVersion" placeholder="版本号"></el-input>
            </el-form-item>

            <el-form-item label="APP 版本更新日志">
                <el-input v-model="formData.updateLog" type="textarea" :rows="3" placeholder="更新日志内容"></el-input>
            </el-form-item>

            <!-- 付款模块 -->
            <el-form-item label="付款模块">
                <el-table :data="paymentModules" border style="width: 100%">
                    <el-table-column prop="name" label="模块"></el-table-column>
                    <el-table-column prop="expireTime" label="过期时间"></el-table-column>
                    <el-table-column prop="status" label="状态"></el-table-column>
                    <el-table-column label="操作">
                        <template>
                            <el-button type="text" size="small">设置</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>

            <!-- 状态 -->
            <el-form-item label="状态">
                <el-select v-model="formData.status" placeholder="选择状态">
                    <el-option label="上线" value="online"></el-option>
                    <el-option label="下线" value="offline"></el-option>
                </el-select>
            </el-form-item>

            <!-- 分销协议 -->
            <el-form-item label="分销协议">
                <div class="editor-toolbar">
                    <!-- <el-button-group>
                        <el-button icon="el-icon-document"></el-button>
                        <el-button icon="el-icon-picture"></el-button>
                        <el-button icon="el-icon-link"></el-button>
                    </el-button-group>
                    <el-button-group>
                        <el-button icon="el-icon-bold"></el-button>
                        <el-button icon="el-icon-italic"></el-button>
                        <el-button icon="el-icon-underline"></el-button>
                    </el-button-group>
                    <el-button-group>
                        <el-button icon="el-icon-align-left"></el-button>
                        <el-button icon="el-icon-align-center"></el-button>
                        <el-button icon="el-icon-align-right"></el-button>
                    </el-button-group> -->
                    <!-- 若依框架自带的富文本 -->
                    <el-form-item label="">
                        <editor v-model="formData.agreement" :min-height="192" />
                    </el-form-item>
                </div>
                <!-- <el-input type="textarea" :rows="10" v-model="formData.distributionAgreement"
                    style="margin-top: 10px; width: 100%">
                </el-input> -->
            </el-form-item>
        </el-form>

        <!-- 文本替换和技术支持 -->
        <el-form label-width="120px" label-position="left" :model="formData" style="max-width: 800px; margin-top: 20px">
            <!-- 文本替换 -->
            <div class="text-replace-section">
                <div class="section-header">
                    <h3>文本替换</h3>
                    <el-button type="primary" size="small">清理缓存</el-button>
                </div>

                <el-table :data="textReplacements" border style="width: 100%">
                    <el-table-column prop="code" label="码值"></el-table-column>
                    <el-table-column prop="title" label="标题"></el-table-column>
                    <el-table-column prop="displayText" label="显示标题"></el-table-column>
                    <el-table-column label="操作">
                        <template>
                            <el-button type="text" size="small">设置</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!-- 技术支持 -->
            <div class="editor-toolbar" style="margin-top: 20px;">
                <!-- 若依框架自带的富文本 -->
                <el-form-item label="技术支持">
                    <editor v-model="formData.name" :min-height="192" />
                </el-form-item>
                <!-- 
                <el-input type="textarea" :rows="10" v-model="formData.supportText"
                    style="margin-top: 10px; width: 100%"></el-input> -->
            </div>



            <!-- 每日投票数量 -->
            <el-form-item label="每日投票数量">
                <el-input v-model="formData.voteCount" placeholder></el-input>
            </el-form-item>

            <!-- 音乐播放 -->
            <el-form-item label="音乐播放">
                <el-input v-model="formData.musicUrl" placeholder="请输入音乐播放地址"></el-input>
                <el-button type="primary" size="small" style="margin-top: 10px; margin-left: 10px">请上传文件</el-button>
            </el-form-item>

            <!-- 开启预约 -->
            <el-form-item label="开启预约">
                <el-select v-model="formData.reservationStatus" placeholder="请选择状态">
                    <el-option label="上架" value="on"></el-option>
                    <el-option label="下架" value="off"></el-option>
                </el-select>
            </el-form-item>

            <!-- 微画展色调 -->
            <el-form-item label="微画展色调">
                <el-input v-model="formData.exhibitionColor" placeholder="#FED528"></el-input>
            </el-form-item>

            <!-- 画展表单 -->
            <el-form-item label="画展表单">
                <el-select v-model="formData.formStatus" placeholder="请选择状态">
                    <el-option label="激活" value="active"></el-option>
                    <el-option label="禁用" value="inactive"></el-option>
                </el-select>
            </el-form-item>

            <!-- 按钮 -->
            <div style="margin-top: 20px; text-align: center">
                <el-button type="primary" @click="saveSettings">保存</el-button>
                <el-button @click="goBack">返回</el-button>
            </div>
        </el-form>
    </div>
</template>

<script>
export default {
    name: 'SettingsPage',
    data() {
        return {
            formData: {
                name: '',
                address: '福建省福州市鼓楼区',
                personInCharge: '',
                phoneNumber: '',
                password: '',
                userCommission: 1000,
                schoolWithdrawalRate: 10,
                distributorWithdrawalRate: 10,
                appVersion: '1.0.9',
                updateLog: '1,新增注册模块\n2,其他BUG修复',
                status: 'online',
                distributionAgreement: '',
                voteCount: '1',
                musicUrl: '',
                reservationStatus: 'on',
                exhibitionColor: '#FED528',
                formStatus: 'active',
                supportText: '',
                agreement:'根据我国相关法律的规定，甲、乙双方经友好协商，在平等、自愿、公平、诚信、守法的原则下就甲方乙方双方进行网络分销合作的具体事宜，达成如下一致协议：</br></br>一、合作内容</br></br>甲乙双方在资源共享和双赢的基础上进行合作。甲方按双方约定的供货价格提供分销商品，享用乙方会员网店资源进行网络分销，并承诺按乙方提供地址按时发货；乙方负责介绍分销商品并促成交易成功。</br></br>二、合作期限</br></br>从协议签定之日起，有效期为1年，期满如果双方没有任何违约行为则自动续约；续约有效期仍为1年，按本协议书的规定执行。</br></br>三、商品质量</br></br>1.甲方供应的分销商品质量应当符合中华人民共和国相关法律法规规定的质量标准。</br></br>2.分销商品须与甲方事先所提供的样品或双方在正式合作前约定质量、品种及规格相符。</br></br>3.在保修期内，甲方的售后服务细则及标准，需通过产品说明书或售后服务保修卡等形式向用户有效传达。如遇特殊情形，保修政策可双方另行协商。</br></br>4.因分销商品的售后服务所产生的费用，可由乙方先行垫付，经甲方确认后，可在甲方货款中直接抵扣或由甲方直接给付乙方。'
            },
            paymentModules: [
                { name: '视频', expireTime: '2030-11-30 00:00:00', status: '激活' },
                { name: '课件', expireTime: '2031-09-30 00:00:00', status: '激活' },
                { name: '专栏', expireTime: '2038-06-30 00:00:00', status: '激活' },
                { name: '积分商城', expireTime: '2037-06-30 00:00:00', status: '激活' }
            ],
            textReplacements: [
                { code: 'Artshow', title: '画展文本', displayText: '作品展览' },
                { code: 'Artist', title: '艺术馆文本', displayText: '空间' },
                { code: 'Artitle', title: '活动文本', displayText: '艺术家' },
                { code: 'Yytitle', title: '预约标题', displayText: '预约' },
                { code: 'Yyatt1', title: '预约字段1', displayText: '名称' },
                { code: 'Yyatt2', title: '预约字段2', displayText: '电话' },
                { code: 'Yy1p', title: '投资', displayText: '' },
                { code: 'HzBtnName', title: '画展按钮名', displayText: '加盟咨询' },
                { code: 'HzFormTitle', title: '画展表单标题', displayText: '提交资料' },
                { code: 'HzFormAtt1', title: '画展表单字段1', displayText: '地址' },
                { code: 'HzFormAtt2', title: '画展表单字段2', displayText: '校区品牌' },
                { code: 'HzFormAtt3', title: '画展表单字段3', displayText: '联系电话' },
                { code: 'HzFormAtt4', title: '画展表单字段4', displayText: '咨询课程' },
                { code: 'HzFormAtt5', title: '画展表单字段5', displayText: '' }
            ]
        }
    },
    methods: {
        saveSettings() {
            console.log('保存设置', this.formData);
        },
        goBack() {
            this.$router.go(-1);
        }
    }
}
</script>

<style scoped>
.settings-container {
    padding: 20px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.editor-toolbar {
    background-color: #fff;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    padding: 5px;
    margin-bottom: 10px;
}

.el-button-group {
    margin-right: 5px;
}

.el-form-item {
    margin-bottom: 15px;
}

.el-button+.el-button {
    margin-left: 10px;
}
</style>